/**
 * 基本的表单数据域控制展示
 * @author SPY
 * @date 2020/03/27
 */

import React, { useState, useEffect } from 'react';
import {
  Form,
  Row,
  Col,
  Button,
  Input,
  Radio,
  Checkbox,
  DatePicker,
} from 'antd';
import SimpleSelect from '@/components/Form/Select/SimpleSelect';
import SimpleCascader from '@/components/Form/Cascader/SimpleCascader';
import {
  selectData,
  cascaderData,
  checkboxData,
  radioData,
} from '@/pages/AntD/Form/formData';
import DeptTree from '@/components/Tree/DeptTree/DeptTree';
import SimpleCheckbox from '@/components/Form/Checkbox/SimpleCheckbox';
import SimpleRado from '@/components/Form/Radio/SimpleRadio';

import TextDrag from './dargText';

const { Item } = Form;
const layout = { xs: 24, sm: 12, md: 12 }; // 响应式布局，控制一行显示的列数

const treeData = [
  {
    key: '1',
    title: '集团总部',
    children: [
      {
        key: '11',
        title: '集团总部-人事部',
        isLeaf: true,
      },
      {
        key: '12',
        title: '集团总部-开发部',
        isLeaf: true,
      },
    ],
  },
  {
    key: '2',
    title: '上海分公司',
    isLeaf: true,
  },
];

export default () => {
  const [personalIds, setPersonalIds] = useState<string[]>(() => {
    return [];
    // return ['1', '2'];
  });
  const [personalList, setPersonalList] = useState<Array<{}>>(() => {
    return [];
    // return [
    //   { id: '1', name: '马云' },
    //   { id: '2', name: '马化腾' },
    // ];
  });

  const [form] = Form.useForm();

  useEffect(() => {
    form.setFieldsValue({ advantage: '悟性高' });
  });

  // 提交、收集表单数据
  const onFinish = (values: any) => {
    console.log(values);
  };

  const handleTransferChange = (
    showPersonalIds: string[],
    showPersonalList: Array<{}>,
  ): void => {
    form.setFieldsValue({ personal: showPersonalIds });
    setPersonalIds(showPersonalIds);
    setPersonalList(showPersonalList);
  };

  return (
    <Form
      name="basicForm"
      form={form}
      layout="vertical"
      initialValues={{
        personal: personalIds,
        likes: ['跑步'],
        advantage: '悟性高',
        area: ['A100', 'A1001'],
      }}
      onFinish={onFinish}
    >
      <TextDrag />
      <Row
        gutter={[
          { xs: 8, sm: 16, md: 24 }, // 水平
          { xs: 0, sm: 0, md: 0 }, // 垂直
        ]}
        justify="space-between"
      >
        <Col {...layout} md={24}>
          <Item label="员工姓名" name="name">
            <Input placeholder="请输入员工姓名" />
          </Item>
        </Col>
        <Col {...layout}>
          <Item label="毕业院校" name="school">
            <SimpleSelect
              idKey="id"
              nameKey="name"
              disabledOptions={['北京大学']}
              dataSource={selectData}
            />
          </Item>
        </Col>
        <Col {...layout}>
          <Item label="所在地区" name="area">
            <SimpleCascader
              idKey="value"
              nameKey="label"
              childListKey="children"
              dataSource={cascaderData}
            />
          </Item>
        </Col>
        <Col {...layout} md={13}>
          <Item label="兴趣爱好" name="likes">
            <SimpleCheckbox
              idKey="id"
              nameKey="name"
              columns={4}
              disabledOptions={['游泳']}
              dataSource={checkboxData}
            />
          </Item>
        </Col>
        <Col {...layout} md={13}>
          <Item label="个人优势" name="advantage">
            <SimpleRado
              idKey="id"
              nameKey="name"
              columns={4}
              disabledOptions={['工作认真']}
              dataSource={radioData}
            />
          </Item>
        </Col>
        <Col {...layout}>
          <DeptTree
            treeDataSource={treeData}
            transferDataSource={[]}
            handleTransferChange={handleTransferChange}
            transferIdKey="id"
            transferNameKey="name"
            transferLimitMaxCount={3}
            transferShowPersonalList={personalList}
          />
        </Col>
      </Row>
      <Row>
        <Col {...layout}>
          <Item>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Item>
        </Col>
      </Row>
    </Form>
  );
};
